<template>
  <div class="wrapper">
    <header>{{ title }}</header>
    <main>
      <MyForm
        ref="form"
        v-model="model"
        :opts="opts"
        :showLabel="false"
      ></MyForm>
      <el-button
        @click="confirm"
        :loading="queryLoading"
        class="button"
        size="small"
        >立即登录</el-button
      >
    </main>
  </div>
</template>

<script>
import { login } from "api/users";
export default {
  name: "login",
  data() {
    return {
      /**
       * 标题
       */
      title: process.env.VUE_APP_TITLE,
      /**
       * 表单配置项
       */
      opts: {
        username: {
          title: "用户名",
          required: true,
          max: 10,
          ph: "请输入用户名",
          rules: [{ min: 3 }],
        },
        password: {
          title: "密码",
          required: true,
          type: "password",
          ph: "请输入密码",
          max: 16,
          rules: [{ min: 5 }],
        },
      },
      /**
       * 数据模型
       */
      model: {},
    };
  },
  methods: {
    async confirm() {
      try {
        await this.$refs.form.validate();
        this.queryLoading = true;
        const user = await login(this.model);
        this.$store.commit("setUser", user);
        this.$router.push({ name: "MainLayout" });
      } catch (error) {}
      this.queryLoading = false;
    },
  },
};
</script>

<style lang="scss" scoped>
$color: rgba(0, 0, 0, 0.125);
.wrapper {
  width: 443px;
  margin: 0 auto;
  border: 1px solid $color;
  border-radius: 5px;
  margin-top: 96px;
  header {
    padding: 12px;
    font-size: 28px;
    text-align: center;
    color: #6c757d;
    border-bottom: 1px solid $color;
  }
  main {
    padding: 20px;
    box-sizing: border-box;
    button {
      width: 100%;
      height: 35px;
      color: #fff;
      background-color: #359d95;
    }
  }
}
</style>